import { Button, Col, Form, Input, message, Modal, Row, Select } from 'antd'
import { connect } from 'dva'
import { Component } from 'react'
import styles from './styles.less'

function mapStateToProps({ globalModel, campusProjectModel }) {
  return {
    globalModel: globalModel, //通用全局模块
    campusProjectModel: campusProjectModel,
  }
}
@connect(mapStateToProps)
export default class DetailsModel extends Component {
  constructor(props) {
    super(props)
    this.state = {
      formState: true,
      compile: '编辑',
      option: null,
      departmentName: '',
    }
  }

  componentDidMount() {
    this.props.dispatch({
      type: 'campusProjectModel/getDepartment',
      payload: {
        params: {},
        callback: (item) => {
          let arr = []
          for (let i in item) {
            let obj = {
              value: item[i].name,
              label: item[i].name,
            }
            arr.push(obj)
          }
          this.setState({
            option: arr,
          })
        },
      },
    })
  }

  compileClick = () => {
    this.setState({
      compile: '取消',
      formState: false,
    })
  }

  cancel = () => {
    this.setState({
      compile: '编辑',
      formState: true,
    })
  }

  onFinish = (data) => {
    console.log(data, 'data')
    let { formState } = this.state
    if (!formState) {
      this.props.dispatch({
        type: 'campusProjectModel/staffMsgUpdate',
        payload: {
          params: {
            id: this.props.detailsData.id,
            name: data.name,
            departmentName: data.address,
            phone: data.phone,
            sex: data.sex === '男' ? 0 : 1,
            identityCard: data.useNumber,
          },
          callback: (item) => {
            if (item.code === 0 && item.msg === 'success') {
              message.success('修改成功')
              this.props.onCancel()
              this.props.getData()
              this.cancel()
            }
          },
        },
      })
    } else {
      this.props.onCancel()
    }
  }

  selectOnChange = (e, data) => {
    console.log(e, data, 'e, data')
    this.setState({
      departmentName: data.label,
    })
  }

  componentWillUnmount() {}
  render() {
    let { modelOpen, detailsData, functionState } = this.props
    let { compile, formState, option, departmentName } = this.state
    return (
      <Modal
        title="员工详情"
        centered
        onCancel={() => {
          this.props.onCancel(), this.setState({ compile: '编辑', formState: true })
        }}
        open={modelOpen}
        footer={null}
        width={900}
        destroyOnClose={true}>
        <div className={styles.title}>
          <img src={detailsData?.avatar} />
          <div>{detailsData?.nickName}</div>
        </div>
        <Form
          name="basic"
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 18,
          }}
          onFinish={this.onFinish}
          initialValues={{
            name: detailsData?.name,
            address: detailsData?.departmentName,
            // useNumber: detailsData?.identityCard,
            campusName: detailsData?.campusName,
            phone: detailsData?.phone,
            // sex: detailsData?.sex === 0 ? '男' : '女',
            joinTime: detailsData?.joinTime,
            loginDate: detailsData?.loginDate,
          }}>
          <Row align="middle">
            <Col span={12} push={0}>
              <Form.Item label="姓名" name="name">
                <Input disabled={formState} />
              </Form.Item>
            </Col>
            <Col span={12} push={0}>
              <Form.Item label="所属学校" name="campusName">
                <Input disabled={formState} />
              </Form.Item>
            </Col>
            {/* <Col span={12} push={0}>
                            <Form.Item
                                label="身份证号"
                                name="useNumber"
                                rules={[
                                    { pattern: /(^\d{15}$)|(^\d{17}([0-9]|X)$)/, message: '请输入正确的身份证号码' },
                                ]}
                            >
                                <Input disabled={formState} />
                            </Form.Item>
                        </Col> */}
            <Col span={12} push={0}>
              <Form.Item label="所属院校" name="address">
                <Select
                  defaultValue=""
                  style={{
                    width: 320,
                  }}
                  onChange={this.selectOnChange}
                  options={option}
                  value={departmentName}
                  disabled={formState}
                />
              </Form.Item>
            </Col>
            <Col span={12} push={0}>
              <Form.Item
                label="手机号"
                name="phone"
                rules={[{ pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号' }]}
                disabled>
                <Input disabled={formState} />
              </Form.Item>
            </Col>
            {/* <Col span={12} push={0}>
                            <Form.Item
                                label="性别"
                                name="sex"
                                disabled
                            >
                                <Input disabled={formState} />
                            </Form.Item>
                        </Col> */}
            <Col span={12} push={0}>
              <Form.Item label="加入时间" name="joinTime">
                <Input disabled={true} placeholder={detailsData?.joinTime} />
              </Form.Item>
            </Col>
            <Col span={12} push={0}>
              <Form.Item label="上次登录时间" name="loginDate">
                <Input disabled={true} placeholder={detailsData?.loginDate} />
              </Form.Item>
            </Col>
          </Row>
          {functionState && (
            <div className={styles.functionBtn}>
              <div className={styles.compile} onClick={compile === '编辑' ? this.compileClick : this.cancel}>
                {compile}
              </div>
              <Button type="primary" htmlType="submit">
                确认
              </Button>
            </div>
          )}
        </Form>
      </Modal>
    )
  }
}
